<div class="results-container">
    <div class="results-header">
        <div class="results-icon">📊</div>
        <h1 class="results-title">{{ question.question_text }}</h1>
        <p class="results-subtitle">投票结果</p>
    </div>

    <a href="{% url 'polls:index' %}" class="back-to-polls">
        <svg viewBox="0 0 24 24" width="20" height="20">
            <path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
        <span>所有投票</span>
    </a>

    <ul class="results-list">
        {% for choice in question.choice_set.all %}
            <li class="result-item">
                <span class="choice-text">{{ choice.choice_text }}</span>
                <span class="votes-count">{{ choice.votes }} vote{{ choice.votes|pluralize }}</span>
                <div class="vote-bar-container">
                    <div class="vote-bar" style="--vote-percentage: {% widthratio choice.votes question.max_votes 100 %}%"></div>
            </li>
        {% endfor %}
    </ul>

    <a href="{% url 'polls:detail' question.id %}" class="vote-again-link">
        <span>再次投票</span>
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4 4V10H10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M20 20V14H14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M20 4L14 10M4 20L10 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </a>
</div>

<style>
    :root {
        --primary: #5B8FF9;
        --primary-dark: #3A72E0;
        --primary-light: #7DA7F9;
        --secondary: #6DD3CE;
        --error: #EF6A6A;
        --success: #2ECC71;
        --text-dark: #2C3E50;
        --text-medium: #57687A;
        --text-light: #95A5A6;
        --bg-light: #F5F7FA;
        --bg-white: #FFFFFF;
        --border-radius: 16px;
        --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
        --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
        --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
        --transition: all 0.3s ease;
    }
    
    body {
        font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        background-color: var(--bg-light);
        color: var(--text-dark);
        line-height: 1.6;
        padding: 20px;
    }
    
    .results-container {
        max-width: 600px;
        margin: 40px auto;
        padding: 32px;
        background: var(--bg-white);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-lg);
        transition: var(--transition);
    }
    
    .results-container:hover {
        box-shadow: 0 15px 30px rgba(0,0,0,0.12);
    }
    
    .results-header {
        text-align: center;
        margin-bottom: 32px;
    }
    
    .results-icon {
        font-size: 48px;
        margin-bottom: 16px;
        color: var(--primary);
        opacity: 0.9;
    }
    
    .results-title {
        color: var(--text-dark);
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 8px;
    }
    
    .results-subtitle {
        color: var(--text-medium);
        font-size: 15px;
    }
    
    .results-list {
        list-style: none;
        padding: 0;
        margin-bottom: 32px;
    }
    
    .result-item {
        margin-bottom: 24px;
    }
    
    .choice-text {
        display: block;
        font-weight: 500;
        color: var(--text-dark);
        margin-bottom: 8px;
        font-size: 16px;
    }
    
    .votes-count {
        display: block;
        color: var(--text-light);
        font-size: 14px;
        margin-bottom: 12px;
    }
    
    .vote-bar-container {
        width: 100%;
        height: 8px;
        background: var(--bg-light);
        border-radius: 4px;
        overflow: hidden;
    }
    
    .vote-bar {
        height: 100%;
        background: linear-gradient(90deg, var(--primary), var(--secondary));
        border-radius: 4px;
        transition: width 0.5s ease;
    }
    
    .vote-again-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 16px;
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        color: white;
        text-decoration: none;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 500;
        transition: var(--transition);
        box-shadow: 0 4px 12px rgba(91, 143, 249, 0.3);
    }
    
    .vote-again-link:hover {
        background: linear-gradient(135deg, var(--primary-light), var(--primary));
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(91, 143, 249, 0.4);
    }
    
    .vote-again-link svg {
        margin-left: 8px;
        transition: var(--transition);
    }
    
    .vote-again-link:hover svg {
        transform: translateX(4px);
    }

    .back-to-polls {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text-medium);
        text-decoration: none;
        font-size: 14px;
        margin-bottom: 20px;
        transition: var(--transition);
        padding: 6px 12px;
        border-radius: 6px;
    }
    
    .back-to-polls:hover {
        color: var(--primary);
        background: rgba(91, 143, 249, 0.1);
        transform: translateX(-4px);
    }
    
    .back-to-polls svg {
        transition: transform 0.3s ease;
    }
    
    .back-to-polls:hover svg {
        transform: translateX(-3px);
    }
    
    /* 调整原有容器位置 */
    .results-container {
        position: relative;
        padding-top: 60px; /* 为顶部按钮留出空间 */
    }
</style>